import { FC, useState } from "react";
import { Popover, Tabs } from "antd";
import { SmileOutlined } from "@ant-design/icons";
import type { TabsProps } from "antd";

// 表情映射，可以根据需要扩展
const emojiMapping = {
  // 表情脸部
  "😊": "[微笑]",
  "😂": "[大笑]",
  "😍": "[爱心眼]",
  "😘": "[亲亲]",
  "😢": "[难过]",
  "😭": "[大哭]",
  "😡": "[生气]",
  "🤔": "[思考]",
  "😴": "[睡觉]",
  "🤗": "[抱抱]",
  "😎": "[酷]",
  "😇": "[天使]",
  "😜": "[调皮]",
  "😋": "[馋]",
  "😱": "[惊吓]",
  "😒": "[无语]",

  // 手势
  "👍": "[赞]",
  "👎": "[踩]",
  "👋": "[招手]",
  "🙏": "[感谢]",
  "✌️": "[胜利]",
  "👌": "[OK]",
  "👏": "[鼓掌]",
  "🤝": "[握手]",

  // 符号和物品
  "❤️": "[爱心]",
  "💔": "[心碎]",
  "💖": "[闪亮爱心]",
  "💯": "[100分]",
  "🎉": "[庆祝]",
  "🎁": "[礼物]",
  "🍀": "[幸运]",
  "🌹": "[玫瑰]",
  "🌞": "[太阳]",
  "🌙": "[月亮]",
  "⭐": "[星星]",
  "🔥": "[火]",

  // 动物
  "🐱": "[猫]",
  "🐶": "[狗]",
  "🐼": "[熊猫]",
  "🐵": "[猴子]"
};

// 表情分类
const emojiCategories = {
  faces: [
    "😊",
    "😂",
    "😍",
    "😘",
    "😢",
    "😭",
    "😡",
    "🤔",
    "😴",
    "🤗",
    "😎",
    "😇",
    "😜",
    "😋",
    "😱",
    "😒"
  ],
  gestures: ["👍", "👎", "👋", "🙏", "✌️", "👌", "👏", "🤝"],
  symbols: [
    "❤️",
    "💔",
    "💖",
    "💯",
    "🎉",
    "🎁",
    "🍀",
    "🌹",
    "🌞",
    "🌙",
    "⭐",
    "🔥"
  ],
  animals: ["🐱", "🐶", "🐼", "🐵"]
};

type EmojiPickerProps = {
  onSelect: (emoji: string, mappedText: string) => void;
};

const EmojiPicker: FC<EmojiPickerProps> = ({ onSelect }) => {
  const [open, setOpen] = useState(false);

  const handleEmojiClick = (emoji: string) => {
    const mappedText = emojiMapping[emoji] || emoji;
    onSelect(emoji, mappedText);
    setOpen(false);
  };

  const items: TabsProps["items"] = [
    {
      key: "1",
      label: "表情",
      children: (
        <div className="grid grid-cols-5 gap-1">
          {emojiCategories.faces.map(emoji => (
            <div
              key={emoji}
              className="text-lg cursor-pointer hover:bg-gray-100 p-1 rounded text-center"
              onClick={() => handleEmojiClick(emoji)}
            >
              {emoji}
            </div>
          ))}
        </div>
      )
    },
    {
      key: "2",
      label: "手势",
      children: (
        <div className="grid grid-cols-5 gap-1">
          {emojiCategories.gestures.map(emoji => (
            <div
              key={emoji}
              className="text-lg cursor-pointer hover:bg-gray-100 p-1 rounded text-center"
              onClick={() => handleEmojiClick(emoji)}
            >
              {emoji}
            </div>
          ))}
        </div>
      )
    },
    {
      key: "3",
      label: "符号",
      children: (
        <div className="grid grid-cols-5 gap-1">
          {emojiCategories.symbols.map(emoji => (
            <div
              key={emoji}
              className="text-lg cursor-pointer hover:bg-gray-100 p-1 rounded text-center"
              onClick={() => handleEmojiClick(emoji)}
            >
              {emoji}
            </div>
          ))}
        </div>
      )
    },
    {
      key: "4",
      label: "动物",
      children: (
        <div className="grid grid-cols-5 gap-1">
          {emojiCategories.animals.map(emoji => (
            <div
              key={emoji}
              className="text-lg cursor-pointer hover:bg-gray-100 p-1 rounded text-center"
              onClick={() => handleEmojiClick(emoji)}
            >
              {emoji}
            </div>
          ))}
        </div>
      )
    }
  ];

  const content = (
    <div className="w-48">
      <Tabs defaultActiveKey="1" items={items} size="small" />
    </div>
  );

  return (
    <Popover
      content={content}
      trigger="click"
      open={open}
      onOpenChange={setOpen}
      placement="topLeft"
    >
      <SmileOutlined className="mr-2 text-base cursor-pointer" />
    </Popover>
  );
};

export default EmojiPicker;
